<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统设置 - 后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="/admin/css/bootstrap.min.css">
<#--<link rel="stylesheet" type="text/css" href="/admin/css/style.css">-->
    <link rel="stylesheet" type="text/css" href="/admin/css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="/admin/images/icon/icon.png">
    <link rel="shortcut icon" href="/admin/images/icon/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/treeTable/css/jquery.treetable.css"/>
    <link rel="stylesheet" type="text/css" href="/treeTable/css/jquery.treetable.theme.default.css"/>
    <link rel="stylesheet" type="text/css" href="/treeTable/css/screen.css"/>
    <link rel="stylesheet" type="text/css" href="/ztree/zTreeStyle/zTreeStyle.css"/>
    <style type="text/css">
        body {
            color: #444;
            background-color: #EEE;
            overflow-x: hidden;
            padding-top: 50px;
            font-family: "Microsoft YaHei", "微软雅黑", "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }

        .table thead tr th {
            font-size: 15px;
            font-weight: 500;
        }

    </style>
    <script type="text/javascript" src="/admin/js/jquery-2.1.4.min.js"></script>
    <script src="/admin/js/bootstrap.min.js"></script>
    <script src="/admin/js/admin-scripts.js"></script>
    <script type="text/javascript" src="/treeTable/jquery.treeTable.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script>
    <script type="text/javascript" src="/ztree/jquery.ztree.all.js"></script>
    <script>

        $(function () {

            //zTree
            var zTreeBeforeExpand = true;

            var setting = {
                view: {
                    addHoverDom: addHoverDom,
                    removeHoverDom: removeHoverDom,
                    dblClickExpand: true,//双击节点时，是否自动展开父节点的标识
                    showLine: true,//是否显示节点之间的连线
                    fontCss: {'color': 'black', 'font-weight': '500'},//字体样式函数
                    selectedMulti: true //设置是否允许同时选中多个节点
                },
                check: {
                    chkboxType: {"Y": "", "N": ""},
                    chkStyle: "checkbox",//复选框类型
                    enable: false //每个节点上是否显示 CheckBox
                },
                edit: {
                    enable: true,
                    editNameSelectAll: true,
                    showRemoveBtn: true,
                    showRenameBtn: true,
                    removeTitle: "remove",
                    renameTitle: "rename"
                },
                data: {
                    simpleData: {//简单数据模式
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: 0
                    }

                },
                callback: {
                    // beforeExpand: zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
                    beforeRename: bfRename,//设置在编辑前调用函数bfRename,执行返回true时自动触发编辑函数onRename
                    onRename: onRename,
                    onClick: zTreeOnClick
                }
            };

            function zTreeOnClick(event, treeId, treeNode) {
                $("#treeId").val(treeNode.id);
                $("#name").val(treeNode.name);
                $("#type").val(treeNode.type);
                $("#permissionName").val(treeNode.permissionName);
                $("#pName").val(treeNode.getParentNode()==null?"":treeNode.getParentNode().name);
                $("#url").val(treeNode.url == "null" ? "" : treeNode.url);
                console.log(treeNode);
            }

            //获取当前节点的同级兄弟节点，不包含本节点
            function getPeerNodes(targetNode) {
                if (targetNode == null) {
                    return null;
                } else {
                    if (targetNode.getParentNode() != null) {
                        return targetNode.getParentNode().children;
                    }
                    return null;
                }
            }

            //回调函数bfRename
            function bfRename(treeId, treeNode, newName, isCancel) {
                // alert(newName.length);
                if (newName.length == 0) {
                    // setTimeout(function () {
                    var menuTree = $.fn.zTree.getZTreeObj("regionZTree");
                    menuTree.cancelEditName();
                    alert("节点名称不能为空.");
                    // }, 200);
                    return false;
                }

                // var zNodes = getPeerNodes(treeNode);
                var treeObj = $.fn.zTree.getZTreeObj("regionZTree");
                var zNodes = treeObj.transformToArray(treeObj.getNodes());//根节点下的所有节点
                console.log(zNodes);
                console.log(treeNode);

                for (var n in zNodes) {
                    if (zNodes[n].name == newName) {
                        if (zNodes[n].id == treeNode.id) return;
                        // setTimeout(function () {
                        var menuTree = $.fn.zTree.getZTreeObj("regionZTree");
                        menuTree.cancelEditName();
                        alert("编目名称已存在！");
                        // }, 200)
                        return false;
                    }
                }
                return true;
            };


            function onRename(e, treeId, treeNode, isCancel) {
                if (isCancel) return;
            }


            var newCount = 1;

            function addHoverDom(treeId, treeNode) {
                var aObj = $("#" + treeNode.tId + "_a");
                if ($("#diyBtn_" + treeNode.id).length > 0) return;
                var editStr = ""
                        + "<span class='button add' id='diyBtn_" + treeNode.id
                        + "' title='" + treeNode.name + "' onfocus='this.blur();'></span>";
                aObj.append(editStr);
                var btn = $("#diyBtn_" + treeNode.id);

                if (btn) btn.bind("click", function () {
                    var zTree = $.fn.zTree.getZTreeObj("regionZTree");
                    zTree.addNodes(treeNode, {
                        id: (treeNode.id + newCount),
                        parentid: treeNode.id,
                        name: "new node" + (newCount++)
                    });
                    return false;
                });

            };

            function removeHoverDom(treeId, treeNode) {
                $("#diyBtn_" + treeNode.id).unbind().remove();
                $("#diyBtn_space_" + treeNode.id).unbind().remove();
            };


            var dominZTree2 = [
                {
                    name: "功能菜单",
                    id: "0",
                    parentId: "rwe34234",
                    children: [
                        {
                            name: "栏目管理",
                            id: "9a0f967ba7bb4fa89c5b4955de613dd9",
                            parentId: "9a0f967ba7bb4fa89c5b4955de613dd9",
                            checked: "true"
                        },
                        {
                            name: "文章管理",
                            id: "2",
                            parentId: "0"
                        },
                        {
                            name: "留言管理",
                            id: "3",
                            parentId: "0"
                        },
                        {
                            name: "用户管理",
                            id: "4",
                            parentId: "0"
                        },
                        {
                            name: "系统设置",
                            id: "5",
                            parentId: "0",
                            children: [
                                {
                                    name: "角色管理",
                                    id: "6",
                                    parentId: "5"
                                },
                                {
                                    name: "菜单管理",
                                    id: "7",
                                    parentId: "5"
                                }
                            ]
                        }
                    ]
                }

            ];

            // var zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree2);

            $.ajax({
                type: "post",
                url: "/back/sys/menu/show",
                data: {},
                dataType: "json",
                success: function (data) {
                    var treeObj = $.fn.zTree.init($("#regionZTree"), setting, data);
                    treeObj.expandAll(true);
                    var root = treeObj.getNodes()[0];
                    console.log(root)
                    treeObj.setChkDisabled(root);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });

            //提交form表单11
            $("#save").click(function () {
                //根据ztree的id获取ztree对象
                var treeObj = $.fn.zTree.getZTreeObj("regionZTree");
                //根据ztree上选中的节点,返回对象
                // var nodes = treeObj.getCheckedNodes(true);
                // var nodes = treeObj.getNodes();
                var nodes = treeObj.transformToArray(treeObj.getNodes());//根节点下的所有节点
                var array = new Array();
                var func = $("#func");

                for (var i = 0; i < nodes.length; i++) {
                    var id = nodes[i].id;
                    var name = nodes[i].name;
                    var parentId = nodes[i].parentId;
                    var url = nodes[i].url;
                    var type = nodes[i].type;
                    var permissionName = nodes[i].permissionName;
                    url == "null" ? "" : url;
                    func.after("<input type='hidden' name='permissions[" + i + "].name' value='" + name + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].parentId' value='" + parentId + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].id' value='" + id + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].url' value='" + url + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].type' value='" + type + "'/>");
                    func.after("<input type='hidden' name='permissions[" + i + "].permissionName' value='" + permissionName + "'/>");
                }
                $("#fm1").submit();
            });

        });

        function del(userId) {
            layer.confirm('您确定要删除？', {
                btn: ['是', '否'], //按钮
                icon: 2
            }, function () {
                layer.msg('删除成功', {icon: 1});
                location.href = "/back/user/delete?userId=" + userId;
            });

        }

        function findPage(pageNo) {
            $("#pageNo").val(pageNo);
            $("#fm1").submit();
        }

        /**
         * 通用的设置ztree节点值方法
         * @param nodeName
         */
        function setNodeValue(nodeName) {
            var treeId = $("#treeId").val();
            var nodeVal = $("#"+nodeName).val();
            console.log(treeId);
            console.log(nodeName);
            if (treeId != "") {
                var treeObj = $.fn.zTree.getZTreeObj("regionZTree");
                var nodes = treeObj.transformToArray(treeObj.getNodes());//根节点下的所有节点
                // var nodes = treeObj.getNodes();
                console.log(nodes.length)
                for (var i in nodes) {
                    console.log(nodes[i].id + "_" + treeId)
                    if (nodes[i].id == treeId) {

                        switch (nodeName) {
                            case 'name':
                                nodes[i].name = nodeVal;
                                break;
                            case 'url':
                                nodes[i].url = nodeVal;
                                break;
                            case 'type':
                                nodes[i].type = nodeVal;
                                break;
                            case 'permissionName':
                                nodes[i].permissionName = nodeVal;
                                break;
                        }
                        treeObj.updateNode(nodes[i]);
                    }
                }
            }
        }
    </script>
</head>
<body class="user-select" style="margin: 0px;padding: 0px;">
<div>
    <ul class="breadcrumb" style="margin: 0px;">
        <li>系统设置</li>
        <li>菜单设置</li>
    </ul>
</div>

<div class="row">
    <div style="padding-left:25px;padding-top:20px;" class="col-md-5">
        <form id="fm1" name="roleForm" action="/back/sys/menu/update" method="post" autocomplete="off">
            <input id="func" type="hidden" name="functionIds">
            <div class="form-group">
                <label for="category-name">菜单</label>
                <ul id="regionZTree" class="ztree"></ul>
                <span class="prompt-text"><strong>注：</strong>对菜单进行拖拽会影响权限对应的菜单层级关系，如果菜单显示和配置的有出入，请更新权限对应的菜单。</span></div>
            <button class="btn btn-primary" id="save" type="button">提交修改</button>
        </form>
    </div>
    <div style="padding-left:25px;padding-top:20px;font-size:15px;font-weight: 500;" class="col-md-7">

        <div class="table-responsive">
            <h4><strong>编辑节点属性值</strong></h4>
            <table class="table table-striped table-hover">
                <input type="hidden" id="treeId" name="id">
                <tbody>
                <tr>
                    <td>节点名称：<input type="text" id="name" name="name" style="width: 350px" onblur="setNodeValue('type')"></td>
                </tr>
                <tr>
                    <td>父节点名称：<input type="text" id="pName" disabled name="pName" style="width: 350px"></td>
                </tr>
                <tr>
                    <td>类型：
                        <select onblur="setNodeValue('type')" name="type" id="type">
                            <option value="menu">菜单</option>
                            <option value="button">按钮</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>节点url：<input type="text" id="url" name="url" style="width: 350px" onblur="setNodeValue('url')"></td>
                </tr>
                <tr>
                    <td>权限：<input type="text" id="permissionName" name="permissionName" style="width: 350px" onblur="setNodeValue('permissionName')"></td>
                </tr>
                </tbody>
            </table>
        <span class="prompt-text"><strong>注：</strong>节点和父节点名称只读，节点url可以修改!</span></div>
        </div>
    </div>

</body>
</html>
